<template>
    <div id="product">
        <!-- 轮播图 -->
        <div class="banner">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img v-lazy="image.img_url"  class="bannerIMG"/>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- info -->
        <div class="info">
            <span>30天无忧退货</span>
            <span>48小时快速退款</span>
            <span>满88元免邮费</span>
        </div>
        <!-- content -->
        <div class="content">
            <h4 class="title">{{info.name}}</h4>
            <p class="brief">{{info.goods_brief}}</p>
            <span class="price">￥{{info.retail_price}}</span>
        </div>
       <!-- 展示规格组件 -->
        <div class="content_next">
            <van-cell title="请选择规格数量"  is-link />
        </div>
       <!-- 商品参数 -->
       <div class="proItem">
           <h3>商品参数</h3>
            <div class="proParams" v-for="(item,index) in attribute" :key="'params'+index">
                <span class="title">{{item.name}}:</span>
                <span class="value">{{item.value}}</span>
            </div>
       </div>
       <!-- 商品详情 -->
       <div class="proDetail" v-html="info.goods_desc">
       </div>
       <!-- 购物组件 -->
       <!-- 收藏颜色  color="#ff5000"
            客服颜色  color="#ee0a24"  -->
       <div>
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服"   />
                <van-goods-action-icon to="/buycart" :info="$store.state.cartTotal.goodsCount==0?'':$store.state.cartTotal.goodsCount" icon="cart-o" text="购物车" />
                <van-goods-action-icon icon="star-o" text="已收藏"   />
                <van-goods-action-button type="warning" text="加入购物车"  @click="chooseSKU"/>
                <van-goods-action-button type="danger" text="立即购买" @click="chooseSKU" />
            </van-goods-action>
       </div>
       <!-- sku -->
        <van-sku
            v-model="show"
            :sku="sku"
            :goods="goods"
            @buy-clicked="onBuyClicked"
            @add-cart="onAddCartClicked"
        />
    </div>
</template>
<script>
import axios from 'axios'
import api from '../assets/config/api.js'
let sku={
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: '颜色', // skuKeyName：规格类目名称
      k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      v: [
        {
          id: '1193', // skuValueId：规格值 id
          name: '红色', // skuValueName：规格值名称
          
        },
        {
          id: '1215',
          name: '蓝色',
         
        }
      ],
      largeImageMode: true, //  是否展示大图模式
    }
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
    {
      id: 2259, // skuId
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '3', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 110 // 当前 sku 组合对应的库存
    },
     {
      id: 2260, // skuId
      's-1': '1', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '4', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 110 // 当前 sku 组合对应的库存
    }, {
      id: 2261, // skuId
      's-1': '5', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '6', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 110 // 当前 sku 组合对应的库存
    }
  ],
  price: '1.00', // 默认价格（单位元）
  stock_num: 227, // 商品总库存

}
export default {
    props:["id"],
    data(){
        return{
           data:{},
           info:{},
           show:false,
           sku:sku,
           goods:{
                    //  商品标题
                    title:'测试商品', 
                    // 默认商品 sku 缩略图
                     picture: 'https://img01.yzcdn.cn/1.jpg', 
                },
          }
    },
    computed:{
        images:function(){
            if(this.data.gallery!=undefined){
                return this.data.gallery
            }else{
                return []
            }
        },
        attribute:function(){
            if(this.data.attribute!=undefined){
                return this.data.attribute
            }else{
                return []
            }
        }
    },
    methods:{
        onClickLeft:function(){
            history.go(-1);
        },
        // 选中商品规格
        chooseSKU:function(){
            this.show=true
        },
       
        onBuyClicked:function(){
            // 立即购买
            
        },
        async onAddCartClicked(skuData){
            // 添加购物车
            this.show=false;
            console.log(skuData);
            let chosseContent=skuData.selectedSkuComb['s-1']+'_'+skuData.selectedSkuComb['s-2']
            console.log(chosseContent);
            let resultPro=this.data.productList.filter((item,index)=>{
                if(item.goods_specification_ids==chosseContent){
                    return true
                }else{
                    return false
                }
            });
            console.log(resultPro);
            let carRes=await axios.post(api.CartAdd, { goodsId: resultPro[0].goods_id,number: skuData.selectedNum,productId: resultPro[0].id });
            let data=carRes.data.data
            // console.log(carRes.data);
            this.$store.commit('setCarlist',data.cartList);
            this.$store.commit('setCarTotal',data.cartTotal);
  }
    },
    async created(){
       let res=await axios.get(api.GoodsDetail,{params:{id:this.id}});
       this.data=res.data.data
       this.info=this.data.info;
       this.goods.picture=this.info.primary_pic_url;
       this.sku.price=this.info.retail_price;
       this.sku.stock_num=this.info.goods_number;
       console.log(this.data);
       let tree=[];
       let arr=[];
       this.data.specificationList.forEach((item,index)=> {
           item.valueList.forEach((product,i)=>{
               arr.push({
                    id: product.id, // skuValueId：规格值 id
                    name: product.value, // skuValueName：规格值名称
               })
           });
            tree.push({
                k: item.name, // skuKeyName：规格类目名称
                k_s: "s-"+item.specification_id, // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                v: arr,
                largeImageMode: false, //  是否展示大图模式
            });
            this.sku.tree=tree;
       });

    }, 
}
</script>
<style lang="less" >
    #product{
        .banner{
            .bannerIMG{
                width: 100%;  
            }
        }
        .info{
            display: flex;
            justify-content: space-around;
            font-size: 14px;
            color: #999;
            height: 25px;
            line-height: 25px;
            background:#efefef;
            span{
                position: relative;
            }
            span::before{
                content: "";
                display: block;
                position:absolute;
                left: -10px;
                top: 9px;
                width: 4px;
                height: 4px;
                border-radius: 2px;
                border: 1px solid red;
            }
        }
        .content{
            margin-top: -10px;
            display: flex;
            flex-direction: column;
            .title{
                font-weight: 500;
            }
            .brief{
                color: #999;
                margin-top: -15px;
            }
            .price{
                color:red;
                font-size:25px;
                margin-top: -15px;
            }
        }
        .content_next{
            .van-cell__title{
                    text-align: left;
            }
        }
        .proItem{
            padding-bottom: 20px;
            h3{
                margin: 10px 0px;
            }
            .proParams{
                width: 90%;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                height: 24px;
                color: #999;  
                font-size: 13px;
                background:#efefefef;
                line-height: 24px;
                text-align: left;
                .title{
                    width: 80px;
                    margin: 0px 10px;
                    border-right: 1px solid #ccc;
                    overflow: hidden;
                }
                .value{
                    width: 260px;
                    overflow: hidden;
                }
            }
        }
        .proDetail{
            width: 100%;
          img{
              width: 100%;
          }  
          p{
              margin: 0px;
              padding: 0px;
              display: flex;
          }
        }
      
       
    }
</style>